import React, {Component} from 'react';

import {connect} from "react-redux";

// 引入action_creator
import {
    increment,
    decrement,
    incrementAsync
} from "../../redux/actions/count_actions_creator"

/*
	1.mapStateToProps函数返回的是一个对象；
	2.返回的对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value
	3.mapStateToProps用于传递状态
*/


/*
	1.mapDispatchToProps函数返回的是一个对象；
	2.返回的对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value
	3.mapDispatchToProps用于传递操作状态的方法
*/
// 定义UI组件
class Count extends Component {


    increment = () => {
        // 获取要选的值
        const {value} = this.selectNum
        this.props.increment(value*1)



    }
    decrement = () => {
        const {value} = this.selectNum
        this.props.decrement(value*1)


    }
    incrementIfOdd = () => {
        const {value} = this.selectNum
        if(this.props.sum % 2 !==0){
            this.props.increment(value*1)
        }


    }
    incrementAsync = () => {
        const {value} = this.selectNum
        this.props.incrementAsync(value*1,2000)

    }

    render() {
        // console.log('传过来什么',this.props)
        return (
            <div>
                <h1>我是count组件,下方的总人数为:{this.props.totalPer}</h1>
                <h2>当前求和为:{this.props.sum}</h2>
                <select ref={c => this.selectNum = c}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>&nbsp;
                <button onClick={this.increment}>+</button>
                &nbsp;
                <button onClick={this.decrement}>-</button>
                &nbsp;
                <button onClick={this.incrementIfOdd}>和为奇数再加</button>
                &nbsp;
                <button onClick={this.incrementAsync}>异步加</button>

            </div>
        );
    }
}

//使用connect()()创建并暴露一个Count的容器组件
export default connect(state=>({sum:state.count,totalPersons:state.addPerson.length}),
    //mapDispatchToProps的一般写法
    /* dispatch => ({
        jia:number => dispatch(createIncrementAction(number)),
        jian:number => dispatch(createDecrementAction(number)),
        jiaAsync:(number,time) => dispatch(createIncrementAsyncAction(number,time)),
    }) */
    // mapDispatchToProps的简写
    {
        increment,
        decrement,
        incrementAsync
    }

)(Count)
